<template>
  <div class="pages">
    <div class="banner-list">
      <el-carousel height="525px">
        <el-carousel-item>
          <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
          <div class="banner banner1">
            <img
              src="https://ctpublic.ieway.cn/public/v5/imgs/index/capture_banner.png"
              alt=""
            />
            <div class="banner-content">
              <div class="banner-title">EV录屏</div>
              <div class="banner-desc">免费无水印，集视频录制与直播</div>
              <div class="banner-desc">功能于一身的桌面录屏软件</div>
              <div class="banner-desc">全球10，000，000+用户选择</div>
              <img src="@/assets/index/capture_banner_buttom.png" alt="" />
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="banner banner2"></div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="banner banner3"></div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <h3 class="page-title">视频加密防盗版</h3>
    <p>AES逐帧加密算法，保护视频版权</p>
    <div class="video">
      <div class="video-img video-img1">
        <img src="@/assets/index/index_player_icon.png" alt="" />
      </div>
      <div class="video-content">
        <div class="enc-top">
          <div class="encrypt-title">加密2</div>
          <div class="">更多详情></div>
        </div>
        <div class="encrypt-des">一键加密整套课程，云端同步上传加密视频</div>
        <div class="encrypt-des">集中管控授权账号，无需下载即可观看</div>
        <div class="encrypt-des">EV6、EV8、全新切片加密技术保障视频安全</div>
        <div class="encrypt-bottom">
          <div class="btn1">视频加密器下载</div>
          <div class="btn1">专用播放器下载</div>
          <div class="btn2">查看视频介绍</div>
        </div>
      </div>
    </div>
    <div class="video">
      <div class="video-img video-img2">
        <img src="@/assets/index/index_player_icon.png" alt="" />
      </div>
      <div class="video-content">
        <div class="enc-top">
          <div class="encrypt-title">加密1</div>
          <div class="">更多详情></div>
        </div>
        <div class="encrypt-des">一机对一码，免流量空间</div>
        <div class="encrypt-des">可支持网盘、微信、qq分发</div>
        <div class="encrypt-des">后台管理授权</div>
        <div class="encrypt-bottom">
          <div class="btn1">视频加密器下载</div>
          <div class="btn1">专用播放器下载</div>
          <div class="btn2">查看视频介绍</div>
        </div>
      </div>
    </div>
    <h3 class="page-title">电子教室系统</h3>
    <p>学校机房、多媒体教室必备</p>
    <div class="video">
      <div class="video-img video-img3">
        <!-- <img src="@/assets/index/index_player_icon.png" alt="" /> -->
      </div>
      <div class="video-content" style="margin-left: 120px">
        <div class="encrypt-des">
          100+台设备画面同屏共享，传输稳定高清超低时延
        </div>
        <div class="encrypt-des">自研广播+点对点补偿技术支持2K流畅观看</div>
        <div class="encrypt-des">多家知名IT培训企业首选电教软件</div>
        <div
          class="encrypt-bottom"
          style="display: flex; justify-content: space-between"
        >
          <div class="btn2">查看视频介绍</div>
          <div class="" style="color: #000">更多详情></div>
        </div>
      </div>
    </div>
    <div class="video">
      <div class="video-content" style="margin-left: 120px">
        <div class="enc-top">
          <div class="encrypt-title">丰富的同屏互动功能</div>
        </div>
        <div class="encrypt-des">屏幕共享、屏幕监控、文件传输、问答统计、</div>
        <div class="encrypt-des">自研广播+平板无线接入、实时录屏等</div>
        <div class="enc-top">
          <div class="encrypt-title">满足多样化的场景需要</div>
        </div>
        <div class="encrypt-des">
          多媒体教室、IT培训教室、学校机房、知识竞赛、企业会议等
        </div>

        <div
          class="encrypt-bottom"
          style="display: flex; justify-content: space-between"
        >
          <div class="btn1">
            <a
              href="https://ctpublic.ieway.cn/public/download/EVScreenShare_v2.3.2.exe"
              >window 2.3.2下载</a
            >
          </div>
          <div class="btn1">
            <a
              href="https://ctpublic.ieway.cn/public/download/EVScreenShare_v2.3.2.exe"
              >Mac 1.2.0下载
            </a>
          </div>
          <div class="btn1">
            <a
              href="https://ctpublic.ieway.cn/public/download/EVScreenShare_v2.3.2.exe"
              >安卓 1.1.4下载
            </a>
          </div>
          <div class="btn1">
            <a
              href="https://ctpublic.ieway.cn/public/download/EVScreenShare_v2.3.2.exe"
              >iOS 1.0.9下载
            </a>
          </div>
        </div>
      </div>
      <div class="video-img video-img4"></div>
    </div>
    <div class="user">
      <div class="user-title">我们的用户</div>
      <div class="user-desc">
        自2015年初创以来，一唯不断发展壮大，在全球已拥有超过10,000,000用户，为超过80多个国家和地区提供服务。
      </div>
      <img src="@/assets/index/world_map.png" alt="" />
    </div>
    <div class="tab">
      <div class="tab-content" v-for="(item, index) in tabList">
        <div class="content-title">{{ item.title }} <span>></span></div>
        <div class="content-desc">{{ item.desc }}</div>
      </div>
    </div>
    <h3 class="page-title">他们都在用</h3>
    <p>多个知名企业、团队和个人都在使用一唯的产品</p>
    <div class="we-list">
      <div class="list-item item1"></div>
      <div class="list-item item2"></div>
      <div class="list-item item3"></div>
      <div class="list-item item4"></div>
    </div>
    <div class="we-list">
      <div class="list-item item5"></div>
      <div class="list-item item6"></div>
      <div class="list-item item7"></div>
      <div class="list-item item8"></div>
    </div>
    <div class="we-list">
      <div class="list-item item9"></div>
      <div class="list-item item10"></div>
      <div class="list-item item11"></div>
      <div class="list-item item12"></div>
    </div>
    <div class="purchase"></div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
let state = reactive({
  tabList: [
    {
      title: "客服服务",
      desc: "为客户提供多时段答疑解惑、多样化方案定制和产品会员等相关问题的服务咨询",
    },
    {
      title: "安全认证",
      desc: "经过360软件管家和腾讯软件管家安全认证，软件安全无毒，让您使用更放心",
    },
  ],
});
let { tabList } = toRefs(state);
</script>

<style lang="less" scoped>
h3 {
  font-size: 36px;
  font-weight: 700;
  line-height: 43px;
  text-align: center;
  letter-spacing: 0;
  color: #333;
  margin-top: 60px;
  margin-bottom: 16px;
}
p {
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  letter-spacing: 0;
  color: #999;
  margin-bottom: 66px;
}
.demonstration {
  color: var(--el-text-color-secondary);
  height: 525px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.pages {
  .banner-list {
    height: 525px;
    .banner {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 739px;
        height: 438px;
        margin-top: 37px;
      }
      .banner-content {
        .banner-title {
          font-size: 40px !important;
          margin: 40px 0 20px 0;
          padding: 0;
          color: #fff;
        }
        .banner-desc {
          font-size: 26px !important;
          line-height: 36px !important;
          font-weight: 350;
          letter-spacing: 0.1rem;
          color: #fff;
        }
        img {
          width: 208px;
          height: 92px;
        }
      }
    }
    .banner1 {
      background-image: url("../../assets/index/capture_banner_backgroud.png");
    }
    .banner2 {
      background-image: url("../../assets/index/edit_banner_backgroud.png");
    }
    .banner3 {
      background-image: url("../../assets/index/converter_banner_backgroud.png");
    }
  }

  .video {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 88px;
    .video-img {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 596px;
      height: 341px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .video-img1 {
      background-image: url("../../assets/index/viedo.png");
    }
    .video-img2 {
      background-image: url("../../assets/index/enc1_index.png");
    }
    .video-img3 {
      background-image: url("../../assets/index/viedeo1.png");
    }
    .video-img4 {
      background-image: url("../../assets/index/e_class2.png");
    }
    .video-content {
      margin-left: 60px;
      .enc-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .encrypt-title {
          font-size: 26px;
          font-weight: 600;
          line-height: 40px;
          letter-spacing: 0;
          color: #000;
        }
      }
      .encrypt-des {
        font-family: SourceHanSansCN-Regular;
        font-size: 20px;
        font-weight: 400;
        line-height: 40px;
        letter-spacing: 0;
        color: #666;
      }
      .encrypt-bottom {
        display: flex;
        align-items: center;
        margin-top: 60px;
        .btn1 {
          border: 1px solid #4a90e2;
        }
        .btn2 {
          background: #e2eeff;
        }
        div {
          width: 150px;
          height: 42px;
          line-height: 42px;
          margin-right: 6px;
          cursor: pointer;
          border-radius: 2px;
          color: #4a90e2;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .user {
    height: 717px;
    background: #373a3f;
    display: flex;
    align-items: center;
    // justify-content: center;
    flex-direction: column;
    color: #ffffff;

    .user-title {
      font-size: 46px;
      margin-bottom: 28px;
      margin-top: 60px;
    }
    .user-desc {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      text-align: center;
      margin: 30px;
    }
    img {
      width: 930px;
      aspect-ratio: auto 930 / 432;
      height: 432px;
    }
  }
  .tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    width: 1180px;
    height: 121px;
    background: #ffffff;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.08);
    margin-top: -66px;
    display: flex;
    padding: 0 37px;
    box-sizing: border-box;

    .tab-content {
      padding: 10px;
      .content-title {
        font-size: 30px;
        font-weight: 700;
        display: flex;
        align-items: center;
        margin-bottom: 30px;
      }
      .content-desc {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #666666;
        text-align: left;
      }
    }
    .tab-content:first-child {
      border-right: 1px solid #e5e5e5;
      padding-right: 50px;
    }
  }
  .we-list {
    display: flex;
    align-items: center;
    width: 802px;
    margin: 0 auto;
    margin-bottom: 30px;

    .list-item {
      width: 170px;
      height: 63px;
      text-align: center;
      margin-right: 40px;
    }
    .item1 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -200px -259px;
    }
    .item2 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -200px -10px;
    }
    .item3 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -390px -259px;
    }
    .item4 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -10px -10px;
    }
    .item5 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -390px -176px;
    }
    .item6 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -200px -176px;
    }
    .item7 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -10px -93px;
    }
    .item8 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -200px -93px;
    }
    .item9 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -10px -176px;
    }
    .item10 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -10px -259px;
    }
    .item11 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -390px -10px;
    }
    .item12 {
      background: url("https://ctpublic.ieway.cn/public/v5/imgs/index_sprites_company.png") -390px -93px;
    }
  }
  .purchase {
    height: 148px;
    background: url("../../assets/index/zhengfu.png") center center no-repeat;
    background-size: cover;
    cursor: pointer;
    margin-top: 60px;
  }
}
</style>
